<template>
  <el-card class="exam-notice-item">
    <div slot="header" class="clearfix">
      <div class="header-box">
        <span>{{ item.title }}</span>
        <el-link style="float: right;">更多>>></el-link>
      </div>
    </div>
    <div class="item-wrap">
      <div class="item-container">
        <div class="introduce">
          <div class="introduce-head">考试介绍</div>
          <div class="introduce-list">
            <div class="introduce-item">
              <div class="introduce-item_head">
                <div class="tag">考试报名</div>
                <div class="tips">{{ item.tips }}</div>
              </div>
              <div class="introduce-item_body">
                <div class="item" v-for="registration in item.registrationList" :key="registration.value">{{
                  registration.label }}</div>
              </div>
            </div>
            <div class="introduce-item">
              <div class="introduce-item_head">
                <div class="tag">大纲教材</div>
              </div>
              <div class="introduce-item_body">
                <div class="item" v-for="textBook in item.textBookList" :key="textBook.value">
                  {{ textBook.label }}
                </div>
              </div>
            </div>
            <div class="introduce-item">
              <div class="introduce-item_head">
                <div class="tag">成绩查询</div>
              </div>
              <div class="introduce-item_body">
                <div class="item" v-for="requestQuery in item.requestQueryList" :key="requestQuery.value">
                  {{ requestQuery.label }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="notice">
            <el-tag class="notice-tag" color="#265DA4" size="large">最新</el-tag>
            <div class="scroll-container-x" ref="scrollContainerXRef">
              <div class="scrollbar__wrap" ref="scrollBarContentRef">
                <div v-for="(n, index) in item.notification" :key="index">{{ n }}</div>
                <div v-for="(n, index) in item.notification" :key="index">{{ n }}</div>
                <div v-for="(n, index) in item.notification" :key="index">{{ n }}</div>
                <div>End</div>
              </div>
            </div>
          </div>
          <div class="material">
            <div class="head title-bold">备考资料</div>
            <div class="list">
              <div class="item" v-for="(materialItem, index) in item.examMaterials" :key="materialItem.id">
                <div class="wrap">
                  <img :src="getImageUrl(materialItem.url)" alt="" />
                  <div class="title">{{ materialItem.title }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="question-bank">
            <div class="head title-bold">知识题库</div>
            <div class="list">
              <div class="item" v-for="knowledgeBankItem in item.knowledgeBank" :key="knowledgeBankItem.id"
                @click="onQuestionBank(knowledgeBankItem)">
                <div class="wrap">
                  <img :src="getImageUrl(knowledgeBankItem.url)" alt="" />
                  <div class="name">{{ knowledgeBankItem.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script  setup>

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})
const item = props.item
const scrollContainerXRef = ref(null)
const scrollBarContentRef = ref(null)

let value = ref(0)
// 容器宽度
let barWidth = scrollContainerXRef.value?.offsetWidth || 0
// 内容宽度
let contentWidth = scrollBarContentRef.value?.offsetWidth || 0
watch(value, (newVal, oldVal) => {
  let allWidth = barWidth + contentWidth
  if (newVal <= -allWidth) {
    if (scrollBarContentRef.value) {
      scrollBarContentRef.value.style.marginLeft = barWidth + 'px'
    }
    value.value = 0
  }
})

onMounted(() => {
  // 初始化滚动条
  scrollInit()
})
let timer = null
function scrollInit() {
  barWidth = scrollContainerXRef.value?.offsetWidth || 0
  contentWidth = scrollBarContentRef.value?.offsetWidth || 0
  timer = setInterval(startAnimate, 20)
}

// 开启动画
function startAnimate() {
  nextTick(() => {
    value.value -= 1
    if (scrollBarContentRef.value) {
      scrollBarContentRef.value.style.marginLeft = barWidth + value.value + 'px'
    }
  })
}

onUnmounted(() => {
  timer && clearInterval(timer)
})

const getImageUrl = (name) => {
  return new URL(`/src/assets/images/${name}.png`, import.meta.url).href
}

const questionBankActive = ref(null)
function onQuestionBank(row) {
  if (questionBankActive.value == row.id) {
    questionBankActive.value = null
  } else {
    questionBankActive.value = row.id
  }
}
</script>
<style lang="scss" scoped>
.exam-notice-item {
  margin-bottom: 25px;

  &:last-child {
    margin-bottom: 0;
  }

  :deep(.el-card__body) {
    padding: 0 !important;
  }

  .header-box {
    padding: 14px 30px 17px 44px;
    border-bottom: 1px solid #DDDDDD;
  }

  .item-wrap {
    .item-container {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .introduce {
        flex: 1;
        max-width: 34%;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #DDDDDD;

        .introduce-head {
          padding: 15px 0 13px;
          text-align: center;
          font-size: 24px;
          border-bottom: 1px solid #DDDDDD;
        }

        .introduce-list {
          padding-left: 25px;
          padding-top: 26px;
        }

        .introduce-item {
          margin-bottom: 35px;

          &_head {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
            color: #333;
            font-size: 16px;

            .tag {
              color: #666;
              background: #F4F2F2;
              padding: 7px 19px 7px 13px;
              font-size: 16px;
              border-radius: 0 10px 10px 0;
              margin-right: 10px;
            }
          }

          &_body {
            display: flex;
            align-items: center;
            padding-left: 13px;

            .item {
              flex: 0 0 33.3333%;
            }
          }
        }
      }

      .main {
        flex: 2.5;
        max-width: 66%;
        display: flex;
        flex-direction: column;
        padding: 20px 30px 20px 26px;

        .title-bold {
          font-weight: bold;
          font-size: 20px;
          color: #333;
        }

        .material,
        .question-bank {
          flex: 1;
          display: flex;
          flex-direction: column;

          .list {
            flex: 1;
            display: flex;
            align-items: center;

            .item {
              height: 100%;
              flex: 1;

              .wrap {
                height: 100%;
              }
            }
          }
        }

        .notice {
          display: flex;
          align-items: center;
          margin-bottom: 24px;

          .notice-tag {
            color: #fff;
            margin-right: 16px;
          }

          .scroll-container-x {
            position: relative;
            width: 100%;
            height: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            /* Firefox */
            padding: 0 10px;

            &::-webkit-scrollbar {
              display: none;
              /* Chrome Safari */
            }

            .scrollbar__wrap {
              height: 100%;
              padding: 0;
              margin: 0;
              display: inline-block;
              word-break: keep-all;
              white-space: nowrap;
              font-family: 微软雅黑;
              font-size: 14px;

              &>div {
                line-height: 32px;
                height: 100%;
                display: inline-block;
                white-space: nowrap;
                transition-timing-function: linear;
              }
            }
          }
        }

        .material {
          margin-bottom: 25px;

          .head {
            margin-bottom: 16px;
          }

          .list {
            column-gap: 24px;
            display: flex;
            flex-wrap: nowrap;

            .item {
              flex: calc(33.3333333% - 24px) 0 0;
            }
          }

          .wrap {
            text-align: center;

            img {
              width: 100%;
            }
          }
        }

        .question-bank {
          .head {
            margin-bottom: 6px;
          }

          .list {
            height: 54px;
            column-gap: 20px;

            .item {
              flex: calc(25% - 20px) 0 0;
              cursor: pointer;


              &:hover {
                .wrap {
                  background: #FAFAFE;
                }
              }

              &:active {
                .wrap {
                  background: #D0E4FD;
                }
              }

            }

            .wrap {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 14px 20px 10px 20px;
              background: #F7F7F7;

              img {
                width: 30px;
                height: 30px;
              }

              .name {
                color: #333;
                font-size: 16px;
              }
            }

          }
        }
      }
    }
  }
}
</style>
